<template>
  <div class="vpt-base-template-100"
       :style="baseStyle">
    <div class="vpt-100-header">
      <div class="vpt-100-header-box">
        <div class="header-box-left"
             @click="clickHeader">
          <div class="title"
               :style="{ fontSize: titleSize }">
            {{ title }}
          </div>
          <img src="@/assets/img/theme1/arrow-right.png"
               alt=""
               :style="imgStyle" />
          <VptPalnTag :text="getTagType(data)"
                      :tagStyle="tagStyle"
                      size="0.12rem"
                      lineHight="0.2rem"
                      :type="data.type">
          </VptPalnTag>
        </div>
        <div class="header-box-right">
          <slot name="header-right">
            <div class="header-box-right-item"
                 v-for="(item, index) in rightList"
                 :key="index">
              <div class="label"
                   :style="labelStyle">
                {{ item.name }}
              </div>
              <div class="number"
                   :style="numberStyle"
                   :class="{ [item.class]: Number(data[item.props] || '0') }">
                {{ addThousandsSeparator(data[item.props] ?? "-") }}
              </div>
            </div>
          </slot>
        </div>
      </div>
    </div>
    <!-- <div
      class="vpt-100-list"
      v-if="data.list && data.list.length"
      :style="vptListStyle"
    >
      <VptPalnList
        :planListStyle="planListStyle"
        :planItemStyle="planItemStyle"
        :noDataStyle="noDataStyle"
        :list="data.list"
        :itemLeftStyle="itemLeftStyle"
      ></VptPalnList>
    </div>

    <div class="triangle-box" :style="boxStyle"></div> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import VptPalnTag from "@/components/vpt-base-tag";
import VptPalnList from "@/components/vpt-base-msg-list";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  title: { type: String, default: "" },
  titleSize: { type: String, default: "0.14rem" },
  baseStyle: {
    type: Object,
    default: () => ({
      minHeight: "0.56rem",
      padding: "0.16rem",
    }),
  },

  tagStyle: {
    type: Object,
    default: () => ({}),
  },
  labelStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.14rem",
      marginRight: "0.08rem",
    }),
  },
  numberStyle: {
    type: Object,
    default: () => ({
      fontSize: "0.18rem",
    }),
  },
  vptListStyle: {
    type: Object,
    default: () => ({
      marginTop: "0.16rem",
    }),
  },

  planListStyle: { type: Object, default: () => ({}) },
  planItemStyle: {
    type: Object,
    default: () => ({}),
  },

  boxStyle: {
    type: Object,
    default: () => ({
      right: "-0.005rem",
      bottom: "-0.005rem",
      width: "0.17rem",
      height: "0.17rem",
      "--dot-right": "0.05rem",
      "--dot-top": "-0.13rem",
      "--dot-width": "0.25rem",
      "--dot-height": "0.25rem",
      "--aft-right": "-0.05rem",
      "--aft-bottom": "-0.01rem",
      "--aft-border-bottom": "0.08rem solid rgb(0, 106, 255)",
      "--aft-border-right": "0.08rem solid transparent",
      "--aft-border-left": "0.08rem solid transparent",
    }),
  },
  data: { type: Object, default: () => ({}) },
  imgStyle: { type: Object, default: () => ({}) },
  noDataStyle: { type: Object, default: () => ({}) },
});
const itemLeftStyle = { "--bef-height": "0.14rem" };
// const exampleStyle = computed(() => props.boxBeforeStyle);

const rightList = ref([
  { props: "warning_count", name: "告警", class: "is-danger" },
  { props: "info_count", name: "提示", class: "is-warn" },
]);
const emit = defineEmits(["clickHeader"]);

const getTagType = (item) => {
  return {
    success: "正常",
    warn: "提示",
    danger: "告警",
  }[item.type];
};

const clickHeader = () => {
  emit("clickHeader", props.data);
};
</script>

<style lang="less" scoped>
.vpt-base-template-100 {
  position: relative;
  width: 100%;
  //   min-height: 0.56rem;
  //   padding: 0.32rem;
  // border: 1px dashed rgb(0, 106, 255);
  border: 0.01rem solid #e6ebf5;
  box-sizing: border-box;
  background: #0d2542;

  .triangle-box {
    position: absolute;
    right: -0.01rem;
    bottom: -0.01rem;
    width: 0.17rem;
    height: 0.17rem;
    background-color: rgba(13, 37, 66, 1);
    z-index: 999;

    &::after {
      position: absolute;
      right: var(--aft-right);
      bottom: var(--aft-bottom);
      content: "";
      display: inline-block;
      border-bottom: var(--aft-border-bottom);
      border-right: var(--aft-border-right);
      border-left: var(--aft-border-left);
      transform: rotate(135deg);
    }

    &::before {
      position: absolute;
      right: var(--dot-right);
      top: var(--dot-top);
      content: "";
      width: var(--dot-width);
      height: var(--dot-height);
      transform: rotate(45deg);
      // border-right: 0.01rem solid #0A3268;
    }
  }

  .vpt-100-header-box {
    display: flex;
    align-items: center;

    .header-box-left {
      flex: 1;
      width: 0;
      display: flex;
      align-items: center;

      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .title,
      img {
        cursor: pointer;
      }

      > img {
        width: 0.18rem;
        height: 0.18rem;
        margin-top: 0.02rem;
      }
    }

    .header-box-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-left: 0.2rem;

      .header-box-right-item {
        display: flex;
        align-items: center;
        font-size: 0.28rem;
        width: 0.7rem;

        .header-box-left {
          flex: 1;
          width: 0;
          display: flex;
          align-items: center;

          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .title,
          img {
            cursor: pointer;
          }

          > img {
            width: 0.14rem;
            height: 0.14rem;
            margin-top: 0.02rem;
          }
        }

        &:not(:last-child) {
          margin-right: 0.2rem;
        }

        .label {
          color: rgba(255, 255, 255, 0.7);
          margin-right: 0.08rem;
          white-space: nowrap;
        }

        .number {
          color: #fff;
          font-size: 0.36rem;
        }

        .label.number {
          // font-family: HarmonyOS_Sans_SC;
        }
      }
    }

    .title {
      font-size: 0.28rem;
      color: #fff;
      // font-family: HarmonyOS_Sans_SC;
    }
  }

  .vpt-100-list {
    margin-top: 0.32rem;
  }
}
</style>